<template>
  <div class="page-container page-container-create">
     <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>其他类促销</el-breadcrumb-item>
        <el-breadcrumb-item>预售</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--页面标题-->
    <p class="font22 mb20" v-if="promotionId && promotionId != '0'">编辑预售</p>
    <p class="font22 mb20" v-else>创建预售</p>
    <!--工具栏-->
    <div class="toolbar">
      <div class="stepset" >
        <ul>
          <li :class="{'active':active>=1}"><span>1</span><p>设置活动规则</p></li>
          <!-- <li :class="{'active':active>=2}"><span>2</span><p>设置活动商家/店铺</p></li> -->
          <li :class="{'active':active>=3}"><span>2</span><p>设置活动商品</p></li>
          <li :class="{'active':active>=4}"><span>3</span><p>创建成功</p></li>
        </ul>
      </div>
      <!-- 第一步的页面，设置活动规则 -->
      <div v-show="active == 1" class="content create_stepOne createSet" >
        <el-form  :model="filters" :rules="filtersRules" ref="filters" :inline="true">
          <div class="title">基本设置：</div>
          <div class="item">
            <div class="m_b30">
              <el-form-item label="活动名称：" prop="promName" class="wid color999" required>
                <el-input clearable v-model.trim="filters.promName" placeholder="请输入3~60个字符之间" class="input" maxlength="60"
                    minlength="3"></el-input>
              </el-form-item>
            </div>
            <!--活动时间-->
            <el-row class="m_b30 times">
              <!-- <el-form-item label="活动时间：" prop="startTime" class="wid">
                <el-date-picker v-model="filters.startTime" type="datetime" :picker-options="startTime" placeholder="开始时间" class="input_postion" size="mini"></el-date-picker>
              </el-form-item>
              <span class="times-to">-</span>
              <el-form-item label="" prop="endTime" class="wid">
                <el-date-picker v-model="filters.endTime" type="datetime" :picker-options="endTime" placeholder="结束时间" class="input_postion" size="mini"></el-date-picker>
              </el-form-item> -->

              <el-form-item label="活动时间：" class="wid w450" prop="promotionStartEndTime" >
                  <el-date-picker
                    v-model="filters.promotionStartEndTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    size="mini"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="timeCheck"
                  ></el-date-picker>
              </el-form-item>
            </el-row>
           <el-row class="m_b30">
                <el-form-item label="活动搜索词：" prop="searchKeyword" class="wid t_r" label-width="140px">
                  <el-input
                    type="text"
                    v-model.trim="filters.searchKeyword"
                    placeholder="多个搜索词可用数据逗号“,”隔开"
                    class="input" clearable
                  />
                </el-form-item>
              </el-row>

               <el-row class="m_b30">
                <el-form-item label="活动费用预算：" prop="budget" class="wid t_r" label-width="140px">
                  <el-input
                    type="text"
                    v-model.trim="filters.budget"
                    placeholder="请输入平台营销费用"
                    class="input" clearable
                    oninput="value=value.replace(/[^\d]/g,'')"
                  /><span>元</span>
                </el-form-item>
              </el-row>
              <el-row class="m_b30">
                <el-form-item label="预警比例：" prop="warningNum" class="wid t_r" label-width="140px">
                  <el-input
                    type="text"
                    v-model.trim="filters.warningNum"
                    placeholder="请输入预警比例："
                    class="input" clearable
                    oninput="value=value.replace(/[^\d]/g,'')"
                  /><span>%</span>
                </el-form-item>
              </el-row>
          </div>

          <div class="title" >活动规则：</div>
          <div class="item">
            <!--活动类型-->
            <el-row class="m_b30">
              <el-form-item label="活动类型：" prop="frontPromType" class="wid labelAlignment" required>
                <el-radio-group v-model="filters.frontPromType">
                  <!-- <el-radio :label="17" class="form-radio radioAlignment mr40 noMarginLeft" border>尾款结算</el-radio> -->
                  <el-radio :label="18" class="form-radio radioAlignment w130 t_l noMarginLeft" border>一口价</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <!-- <el-row class="m_b30 times"> -->
              <!-- <el-form-item label="订金支付时间：" prop="frontMoneyPayTimeStart"  >
                <el-date-picker v-model="filters.frontMoneyPayTimeStart" type="datetime" :picker-options="frontMoneyPayTimeStart" placeholder="开始时间" class="input_postion" size="mini"></el-date-picker>
              </el-form-item>
              <span class="times-to">-</span>
              <el-form-item label="" prop="frontMoneyPayTimeEnd" class="wid">
                <el-date-picker v-model="filters.frontMoneyPayTimeEnd" type="datetime" :picker-options="frontMoneyPayTimeEnd" placeholder="结束时间" class="input_postion" size="mini"></el-date-picker>
              </el-form-item> -->
              <!-- <el-form-item label="订金支付时间：" prop="frontMoneyPayStartEndTime" class="w450">
                  <el-date-picker
                    v-model="filters.frontMoneyPayStartEndTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    size="mini"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="frontMoneyPayTimeCheck"
                  ></el-date-picker>
              </el-form-item> -->
            <!-- </el-row> -->
            <!-- <el-row class="m_b30 times"  v-if="filters.frontPromType == 17"> -->
              <!-- <el-form-item label="尾款支付时间：" v-if="filters.frontPromType == 17" prop="tailMoneyPayTimeStart" >
                <el-date-picker v-model="filters.tailMoneyPayTimeStart" type="datetime" :picker-options="tailMoneyPayTimeStart" placeholder="开始时间" class="input_postion" size="mini"></el-date-picker>
              </el-form-item>
              <span class="times-to">-</span>
              <el-form-item label="" v-if="filters.frontPromType == 17" prop="tailMoneyPayTimeEnd" class="wid">
                <el-date-picker v-model="filters.tailMoneyPayTimeEnd" type="datetime" :picker-options="tailMoneyPayTimeEnd" placeholder="结束时间" class="input_postion" size="mini"></el-date-picker>
              </el-form-item> -->
<!--
              <el-form-item label="尾款支付时间：" prop="tailMoneyPayStartEndTime" class="w450">
                  <el-date-picker
                    v-model="filters.tailMoneyPayStartEndTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    size="mini"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="tailMoneyPayTimeCheck"
                  ></el-date-picker>
              </el-form-item> -->
            <!-- </el-row> -->
            <el-row class="mb5">
              <el-form-item label="开始发货时间：" prop="sendGoodsTime" class=" m_b13">
                <el-date-picker v-model="filters.sendGoodsTime" type="datetime" placeholder="发货时间" class="input_postion width450" size="mini"></el-date-picker>
              </el-form-item>
            </el-row>
            <!-- <p class="m_l125 m_b30 t_l">请认真填写，如未按约定时间发货，可能引起投诉和退款</p> -->
            <!-- <el-row class="m_b30">
              <el-form-item label="订金是否可退：" prop="isRefundFrontMoney" class="m_b30 labelAlignment" required>
                <el-radio-group v-model="filters.isRefundFrontMoney">
                  <el-radio :label="true" class="form-radio radioAlignment mr40 w130 t_l noMarginLeft" border>是</el-radio>
                  <el-radio :label="false" class="form-radio radioAlignment w130 t_l noMarginLeft" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row> -->
            <!-- <el-row class="m_b30">
              <el-form-item label="活动描述：" prop="description" class="wid descTextarea" >
                <div class="col-sm-9">
                  <div class="col--sm-4">
                    <el-input clearable
                      type="textarea"
                      v-model="filters.description"
                      class="form-control mgB10 ng-pristine ng-valid m_b13"
                      maxlength="100"
                      show-word-limit
                      :placeholder="genDescriptionPlaceholder()"></el-input>
                  </div>
                    <label class="color666 text">注：非必填字段，不填将显示系统默认文案。自定义输入活动说明后将显示在前台商品详情页中，请认真填写。</label>
                    <a href style="color:blue;text-decoration:underline;" data-toggle="modal" data-target="#custom-width-modal-img"></a>
                </div>
              </el-form-item>
            </el-row> -->
          </div>

          <div class="title" >交易规则：</div>
          <div class="item">
            <!-- <el-row class="mb30 labelAlignment">
              <el-form-item label="是否包邮：" prop="parcelsFlag" class="wid" required>
                <el-radio-group v-model="filters.parcelsFlag">
                  <el-radio :label="1" border class="form-radio mr40 radioAlignment w130 t_l noMarginLeft">是</el-radio>
                  <el-radio :label="0" border class="form-radio radioAlignment w130 t_l noMarginLeft">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row> -->
            <el-row class="m_b30 labelAlignment" v-if="deptType != 3">
              <el-form-item label="是否分摊：" prop="costAllocationFlag" class="wid">
                <div class="m_b52">
                  <el-radio v-model="filters.costAllocationFlag" label="1" name="type" value="1" class="radioAlignment w130 t_l noMarginLeft" border>是</el-radio>
                  <el-radio v-model="filters.costAllocationFlag" label="2" name="type" value="2" class="radioAlignment w130 t_l noMarginLeft" border>否</el-radio>
                </div>
              </el-form-item>
            </el-row>
          </div>

          <div class="title">参与条件：</div>
          <div class="item">
            <el-row class="m_b30 labelAlignment">

            </el-row>
            <!-- <el-row v-if="deptType == 0" class="m_b52 ways labelAlignment">
              <el-form-item label="使用渠道：" class="wid contentPadding" required>
                <div style="width:100%;">
                  <el-tree @check="channelChange" :data="channelList" :props="channlProps" show-checkbox
                           node-key="id" :default-expand-all="true" ref="channelTree"></el-tree>
                </div>
              </el-form-item>
            </el-row> -->
<!--            <el-row class="m_b30 labelAlignment">-->
<!--              <el-form-item label="新老用户：" prop="proUserType" class="wid" required>-->
<!--                <div style="width:100%;">-->
<!--                  <el-radio v-model="filters.proUserType" label="0" value="0" class="form-radio m_r45 radioAlignment">全部</el-radio>-->
<!--                  <el-radio v-model="filters.proUserType" label="2" value="2" class="form-radio m_r45 radioAlignment">老用户</el-radio>-->
<!--                  <el-radio v-model="filters.proUserType" label="1" value="1" class="form-radio  radioAlignment">新用户</el-radio>-->
<!--                </div>-->
<!--              </el-form-item>-->
<!--            </el-row>-->
            <el-row class="m_b52 labelAlignment">
              <el-form-item label="新老用户：" prop="selectUserType" class="wid t_r" label-width="122px">
                <div class="flex">
                  <el-checkbox class="mr40 el-checkBox-padding noMarginLeft w130 t_l mleft10" border :indeterminate="userTypeIsIndeterminate" v-model="userTypeCheckAll" @change="handleCheckAllUserTypeChange">全选</el-checkbox>
                  <el-checkbox-group v-model="selectUserType" @change="handleCheckedUserTypeChange">
                    <el-checkbox :label="1" :key="1" class="mr40 el-checkBox-padding noMarginLeft w130 t_l" border>新用户</el-checkbox>
                    <el-checkbox :label="2" :key="2" class="el-checkBox-padding noMarginLeft w130 t_l" border>老用户</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </el-row>
            <el-row class="m_b52 labelAlignment">
              <el-form-item label="会员类型：" prop="selectMemTypes" class="wid t_r" label-width="122px">
                <div class="flex">
                  <el-checkbox class="mr40 el-checkBox-padding noMarginLeft w130 t_l mleft10" border :indeterminate="memTypeIsIndeterminate" v-model="memTypeCheckAll" @change="handleCheckAllMemTypeChange">全选</el-checkbox>
                  <el-checkbox-group v-model="selectMemTypes" @change="handleCheckedMemTypeChange">
                    <el-checkbox :label="1" :key="1" class="mr40 el-checkBox-padding noMarginLeft" border>普通会员</el-checkbox>
                   <el-checkbox :label="2" :key="2" border class="el-checkBox-padding noMarginLeft">we2000</el-checkbox>
                      <el-checkbox :label="3" :key="3" border class="el-checkBox-padding noMarginLeft">分期会员</el-checkbox>
                    </el-checkbox-group>
                </div>
              </el-form-item>
            </el-row>
             <el-row class="m_b52 labelAlignment">
                <el-form-item label="渠道入口：" prop="channelId" class="wid t_r" label-width="140px">
                  <div class="flex">
                    <el-checkbox class="mr40 el-checkBox-padding noMarginLeft w130 t_l mleft10" border :indeterminate="channelIdIsIndeterminate" v-model="channelIdCheckAll" @change="handleCheckAllChannelIdChange">全选</el-checkbox>
                    <el-checkbox-group v-model="channelId" @change="handleCheckedChannelIdChange">
                      <el-checkbox :label="1" :key="1" border class="mr40 el-checkBox-padding noMarginLeft">企业微信</el-checkbox>
                      <el-checkbox :label="2" :key="2" border class="mr40 el-checkBox-padding noMarginLeft">xxx</el-checkbox>
                      <el-checkbox :label="3" :key="3" border class="mr40 el-checkBox-padding noMarginLeft">yyy</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-row>

            <!-- <el-row class="mb10 labelAlignment">
              <el-form-item  prop="levelSelectList" class="wid errorTipsAlignment" >
                <div class="mb20 pdl32">
                    <span style="color:red">*</span>
                    <span class="color333 font16">会员等级：</span>
                  </div>
                  <div style="border:1px solid #ededed" class="ml40 pdl30 pdt20">
                <div v-for="(memberGrade,index) in memberGradeList" :key="memberGrade.deptId" class="flexBox  oh">
                  <div class="child-name mb20 oh">
                    <span class="turnInlineBlock w126 oe t_r h35 lh35 f_l">{{memberGrade.childName}}</span>
                    <span class="turnInlinBlock h35 lh35 f_l">：</span>
                  </div>
                  <div>
                  <el-checkbox class="mr40 el-checkBox-padding noMarginLeft mleft10" border :indeterminate="memberGrade.isIndeterminate" v-model="memberGrade.checkAll" @change="handleMemLevelCheckAllChange(index,memberGrade.checkAll)">全选</el-checkbox>
                  </div>
                  <div>
                  <el-checkbox-group v-model="memberGrade.levelSelectList" >
                    <el-checkbox class=" mb20  mr40 el-checkBox-padding noMarginLeft" border @change="memLevelChange(index,memberGrade.levelList)" v-for="level in memberGrade.levelList" :checked="level.checked" v-model="level.id" :label="level.id" :key="level.key">
                    <span class="turnInlineBlock w104">  {{level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName}}</span>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                </div>
                  </div>
              </el-form-item>
            </el-row> -->
            <!-- <el-row class="m_b30 labelAlignment">
              <el-form-item label="店铺地区：" prop="storeCode" class="wid" required>
                <div style="width:100%;">
                  <el-radio v-model="filters.storeCode" label="0" value="0" class="radioAlignment w130 t_l" border>全国</el-radio>
                </div>
              </el-form-item>
            </el-row> -->
            <!-- <el-row class="m_b30 labelAlignment">
              <el-form-item label="商家地区：" prop="merchantCode" class="wid" required>
                <div style="width:100%;">
                  <el-radio v-model="filters.merchantCode" label="0" value="0" class="radioAlignment w130 t_l" border>全国</el-radio>
                </div>
              </el-form-item>
            </el-row> -->
            <!-- <el-row class="m_b52 labelAlignment">
                <el-form-item label="渠道：" class="wid t_r" label-width="122px"  :required="true">
                  <el-select v-model="filters.channelId" placeholder="请选择" size="mini" clearable class="width450">
                    <el-option
                      v-for="item in channelOption"
                      :key="item.id"
                      :label="item.channelName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            <el-row> -->
              <el-form-item label="备注：" class="wid">
                <el-input
                  type="textarea"
                  v-model="filters.remark"
                  @input="changeRemark($event)"
                  placeholder="请输入备注"
                  class="remarks h286"
                  clearable
                ></el-input>
                 <!-- <quill-editor
                      class="remarks h286"
                      type="textarea"
                      v-model="filters.remark"
                      style="height: 300px;"
                      placeholder="请输入备注" clearable
                     ></quill-editor> -->
              </el-form-item>
<!--            </el-row>-->
          </div>

        </el-form>
      </div>

      <!-- 第二步的页面，选择参与商家/店铺 -->
      <!-- <div class="tab-container  tab-container-noPadding createSet " v-show="active==2">
        <stepTwoVue
          ref="stepTwoVue"/>
      </div> -->

      <!-- 第三步的页面，添加活动商品 -->
      <div class="tab-container  createSet active3" v-show="active==3">
        <stepThreeVue
          ref="stepThreeVue"/>
      </div>

      <!-- 第四步的页面，提交审核 -->
      <div class="tab-container tab-success createSet" v-show="active==4">
        <div class="titleInfo">
          <img src="/static/images/success.png" />
          <span class="font20">活动创建成功!</span>
        </div>
        <div class="step-button2">
          <template>
            <el-button class="resetButton" @click="detailList">查看活动列表</el-button>
          </template>
          <template>
            <template v-if="shenhe == 0 && (filters.status == 1 || filters.status == 4)">
              <kt-button  :size="size" class="ml60 searchButton" @click="submitShenheHuodong" label="提交审核"/>
            </template>
            <template  v-if="filters.status == 2">
                <kt-button class="searchButton" :size="size" @click="shenheHuodong" label="审核"/>
            </template>
          </template>
          <!-- <template  v-if="saveTemplateFlag == 0">
            <kt-button  :size="size" class="ml60 resetButton" perms="market:presell:addtemp" @click="showSaveTemplate" label="保存为模板"></kt-button>
          </template> -->
        </div>
    </div>
    </div>
    <div class="step-button">
      <el-button class="cancelButton" @click="prev" v-show="active=='2' || active=='3'" :plain="active != 1 && active != 4">上一步</el-button>
      <el-button class="searchButton" @click="next" v-show="active!=4">下一步</el-button>
    </div>

    <!-- 第四部的浮框，审核弹框-->
    <el-dialog title="管理员备注" class="el-dialog-style" :visible.sync="dialogVisibleAdmin" :close-on-click-modal="false" @closed="handleClose">
      <el-form :model="adminDataForm" :rules="adminDataFormRules" ref="adminDataForm" label-width="100%" :size="size" label-position="right" inline>
        <el-form-item prop="auditRemark" class="textarea">
          <el-input clearable
            type="textarea"
            placeholder="请输入备注"
            v-model="adminDataForm.auditRemark"
            :rows="4">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" type="primary" plain @click.native="submitFormAdminNotPass" class="cancelButton">不通过</el-button>
        <el-button :size="size" type="primary" @click.native="submitFormAdmin" class="searchButton">通过</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import { quillEditor } from "vue-quill-editor";
import TreeSelect from "@/views/Core/TreeSelect";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import stepTwoVue from "./presell/PresellStepTwo";
import stepThreeVue from "./presell/PresellStepThree";

export default {
  name: "Tab",
  components: {
    KtButton,
    stepTwoVue,
    stepThreeVue,
    TableColumnFilterDialog,
    quillEditor,
    TreeSelect
  },
  data() {

    var isNumber = (rule, value, callback) => {
      if (value === "") {
        return callback();
      } //这是用来判断如果不是必须输入的，则直接跳出
      const r = /^\+?[1-9][0-9]*$/; // 正整数
      // 如果判断不符合正则，则不是正整数不能提交
      if (!r.test(value)) {
        return callback(new Error("必须为正整数"));
      } else {
        return callback();
      }
    };
    /**
     * 新老用户
     */
    var checkUserType = (rule, value, callback) => {
      if(this.selectUserType == null || this.selectUserType.length < 1){
        return callback(new Error("请选择新老用户"));
      }

      return callback();
    };
    /**
     * 会员类型
     */
    var checkMemType = (rule, value, callback) => {
      if(this.selectMemTypes == null || this.selectMemTypes.length < 1){
        return callback(new Error("请选择会员类型"));
      }

      return callback();

    };

    var checkSendGoodsTime = (rule, value, callback) => {
      let msg = "";
      let flag = false;
      let time = null;
      try {
        time = value.getTime()
      } catch (error) {
        console.log("value 没有getTIme方法");
        time = new Date(value).getTime();
      }
      if(this.filters.frontPromType == 17){
        // }else{
        //   time = value.getTime();
        // }
        flag = time < new Date(this.filters.promotionStartEndTime[1]) - 8.64e7 + 1;
        msg = "开始发货时间应在尾款支付时间结束后";
      }else {
        flag = time < new Date(this.filters.promotionStartEndTime[0]) - 8.64e7 + 1;
        msg = "开始发货时间应在活动开始时间结束后"
      }
      if(flag){
        return callback(new Error(msg));
      }
      return callback();
    };
    var checkWaringNum = (rule, value, callback) => {
        if(value && Number(value) > 100){
          return callback(new Error("必须小于等于100%"));
        }else{
          return callback();
        }
    };

    return {

      channelOption:[],
      // 活动时间校验
      timeCheck: {
        disabledDate: time => {
          if (this.promotionStartEndTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.promotionStartEndTime).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
      //订金支付时间校验
      frontMoneyPayTimeCheck: {
        disabledDate: time => {
          // if (this.frontMoneyPayStartEndTime) {
          //   return (
          //     time.getTime() < this.filters.promotionStartEndTime[0].getTime() - 1 ||
          //     time.getTime() > new Date(this.frontMoneyPayStartEndTime).getTime()
          //   );
          // } else {
            return (time.getTime() < new Date(this.filters.promotionStartEndTime[0]) - 8.64e7 + 1 || time.getTime() > new Date(this.filters.promotionStartEndTime[1]).getTime());
          // }
        }
      },
      //尾款支付时间校验
      tailMoneyPayTimeCheck: {
        disabledDate: time => {
          // if (this.tailMoneyPayStartEndTime) {
          //   return (
          //     time.getTime() < this.filters.frontMoneyPayStartEndTime[0].getTime() - 1 ||
          //     time.getTime() > new Date(this.tailMoneyPayStartEndTime).getTime()
          //   );
          // } else {
            return (time.getTime() < new Date(this.filters.frontMoneyPayStartEndTime[0]) - 8.64e7 + 1 || time.getTime() > new Date(this.filters.frontMoneyPayStartEndTime[1]).getTime()
            || time.getTime() < new Date(this.filters.promotionStartEndTime[0]) - 8.64e7 + 1 || time.getTime() > new Date(this.filters.promotionStartEndTime[1]).getTime());
          // }
        }
      },

      // --------------------------公共数据----------------------------------
      promotionId: null,
      auth: 0,

      // --------------------------第一步数据----------------------------------
      filters: {
         warningNum:null,
        budget:null,
        searchKeyword:null,
        id: "",
        promName: "",
        promType: 9,
        frontPromType: 18,
        contentType: 17,
        startTime: "",
        endTime: "",
        // frontMoneyPayTimeStart: "",
        // frontMoneyPayTimeEnd: "",
        // tailMoneyPayTimeStart: "",
        // tailMoneyPayTimeEnd: "",
        isRefundFrontMoney: true,
        description: "",
        sendGoodsTime: "",
        parcelsFlag: 1,
        createMerchantId: 11,
        createMerchantName: "wys",
        labelId: null, //标签
        costAllocationFlag: "1", //是否分摊
        parentAllocationScale: null, //
        childAllocationScale: null,
        merchantAllocationScale: null,
        storeAllocationScale: null,
        channelCodes: null,
        proUserType: "0",
        storeCode: "0",
        merchantCode: "0",
        status: "9",
        promotionStartEndTime: [],
        frontMoneyPayStartEndTime: [],
        tailMoneyPayStartEndTime: [],
      },
      shenhe: "0",
      filtersRules: {
        promName: [
          { validator: this.checkPromName, trigger: "change" },
          { validator: this.checkPromName, trigger: "blur" }
        ],
        selectUserType: [{ required: true, validator: checkUserType, trigger: "change" }],
        selectMemTypes: [{required: true, validator: checkMemType , trigger: "change"}],
        // startTime: [{ required: true, message: "开始时间", trigger: "blur" }],
        // endTime: [{ required: true, message: "结束时间", trigger: "blur" }],

        promotionStartEndTime: [
          { required: true, message: "请选择时间", trigger: "blur" }
        ],
        frontMoneyPayStartEndTime: [
          { required: true, message: "请选择订金支付时间", trigger: "blur" }
        ],
        tailMoneyPayStartEndTime: [
          { required: true, message: "请选择尾款支付时间", trigger: "blur" }
        ],
        // frontMoneyPayTimeStart: [
        //   { required: true, message: "订金支付开始时间", trigger: "blur" }
        // ],
        // frontMoneyPayTimeEnd: [
        //   { required: true, message: "订金支付结束时间", trigger: "blur" }
        // ],
        // tailMoneyPayTimeStart: [
        //   { required: true, message: "尾款支付开始时间", trigger: "blur" }
        // ],
        // tailMoneyPayTimeEnd: [
        //   { required: true, message: "尾款支付结束时间", trigger: "blur" }
        // ],
        sendGoodsTime: [
          { required: true, message: "开始发货时间", trigger: "blur" },
          { validator: checkSendGoodsTime, trigger: "blur" },
        ],
        costAllocationFlag: [
          { required: true, message: "是否分摊必填", trigger: "blur" }
        ],
        budget: [
          { required: true, message: "请输入活动预算", trigger: "blur" }
        ],
        warningNum:[
          { required: false, validator: checkWaringNum, trigger: ["change","blur"] }
        ],
      },
      channelList: [], //渠道Tree List
      channlProps: {
        label: "childName"
      },
      formLabelWidth: "120px",
      // 开始发货时间校验
      sendGoodsTime: {
        disabledDate: time => {
          if(this.filters.frontPromType == 17){
            return time.getTime() < new Date(this.filters.tailMoneyPayStartEndTime[1]) - 8.64e7 + 1;
          }else {
            return time.getTime() < new Date(this.filters.frontMoneyPayStartEndTime[1]) - 8.64e7 + 1;
          }
        }
      },

      // --------------------------第四步数据----------------------------------
      showShenheSubmitButton: true,
      showShenheButton: false,
      saveTemplateFlag: 0,
      promotion: {
        //促销id
        id: "",
        promotionId: "1",
        merchantType: "1"
      },

      // setep3--end
      adminDataForm: {
        auditRemark: ""
      },
      adminDataFormRules: {
        auditRemark: [
          {required: true, message: "审核意见不能为空！", trigger: "change"}
        ]
      },
      dialogVisibleAdmin: false,
      size: "small",
      url: "./static/shop.png",
      url2: "./static/shop2.png",
      content: null,
      editorOption: {},
      activeName: 0,
      setUp: false,
      search: false,
      selectUserType: [1,2],
      userTypeIsIndeterminate: false,
      userTypeCheckAll: true,

      checkMemberGradeList: [
        {platformId: 1, levelCodeList:[1,3]},
        {platformId: 2, levelCodeList:[2,3]}
      ],

      memberGradeList: [
        {businessId: 1, levelList: [{levelCode:"huangjin", levelName:"黄金"},{levelCode:"baiyin", levelName:"白银"},{levelCode:"zhuanshi", levelName:"砖石"}]},
        {businessId: 2, levelList: [{levelCode:"1", levelName:"一级"},{levelCode:"2", levelName:"二级"},{levelCode:"3", levelName:"三级"}]},
        {businessId: 3, levelList: [{levelCode:"chuji", levelName:"初级"},{levelCode:"gaoji", levelName:"高级"}]}
      ],

      //会员等级 会员类型
      memberGradeList: [],
      reloadMemLevel: true,

      //会员类型
      memTypeCheckAll: true,
      selectMemTypes:[1,2,3],
      channelId:[1,2,3],
      channelIdCheckAll:true,
      channelIdIsIndeterminate:false,
      memTypeIsIndeterminate: false,

      active: this.$route.query.auth==null ? 1 :this.$route.query.auth,
      deptType: localStorage.getItem("deptType") //当前登录用户所属组织类型

    };
  },

  methods: {
    //新老用户
    handleCheckAllUserTypeChange(val) {
      this.selectUserType = val ? [1,2] : [];
      this.userTypeIsIndeterminate = false;
    },
    handleCheckedUserTypeChange(value) {
      let checkedCount = value.length;
      this.userTypeCheckAll = checkedCount === 2;
      this.userTypeIsIndeterminate = checkedCount > 0 && checkedCount < 2;
    },
    getUuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    //使用渠道选中时触发

    //会员类型
    handleCheckAllMemTypeChange(val) {
      this.selectMemTypes = val ? [1,2,3] : [];
      this.memTypeIsIndeterminate = false;
    },
    handleCheckedMemTypeChange(value) {
      let checkedCount = value.length;
      this.memTypeCheckAll = checkedCount === 3;
      this.memTypeIsIndeterminate = checkedCount > 0 && checkedCount < 3;
    },

    //渠道
      handleCheckAllChannelIdChange(val) {
        this.channelId = val ? [1,2,3] : [];
        this.channelIdIsIndeterminate = false;
      },
      handleCheckedChannelIdChange(value) {
        let checkedCount = value.length;
        this.channelIdCheckAll = checkedCount === 3;
        this.channelIdIsIndeterminate = checkedCount > 0 && checkedCount < 3;
      },
    getPromotionDetail(promotionId) {
      //获取促销基本信息详情
      let params = { id: promotionId },
      _this = this;
      this.utils.request.promotionDetailById(params, res => {
        if (res.code == "0000") {
          _this.filters = res.data;

          _this.$set(_this.filters, "promotionStartEndTime", [
            new Date(res.data["startTime"]),
            new Date(res.data["endTime"])
          ]);
          // _this.filters.proUserType = (res.data.proUserType + "").split("|");
          _this.filters.storeCode = "0";
          _this.filters.merchantCode = "0";
          let selectUserType = [];
          res.data.proUserType.split(",").forEach(item=>{
            selectUserType.push(Number(item));
          });
          _this.selectUserType = selectUserType;
          if(selectUserType.length < 2){
            _this.userTypeIsIndeterminate = true;
            _this.userTypeCheckAll = false;
          }
          let selectMemTypes = [];
          res.data.memTypes.split(",").forEach(item=>{
            selectMemTypes.push(Number(item));
          });
          _this.selectMemTypes = selectMemTypes;
          if(selectMemTypes.length < 3){
            this.memTypeIsIndeterminate = true;
            this.memTypeCheckAll = false;
          }
          //渠道
            let channelId = [];
            res.data.channelId.split(",").forEach(item=>{
              channelId.push(Number(item));
            });
            _this.channelId = channelId;
            if(channelId.length < 3){
              this.channelIdIsIndeterminate = true;
              this.channelIdCheckAll = false;this.channelId
            }
        }
      });
    },
    changeRemark(val) {
      this.$forceUpdate();
    },
    checkPromName(rule, value, callback) {
      if (!value) {
        return callback(new Error("活动名称不能为空"));
      } else if (value.length >= 3 && value.length <= 60) {
        return callback();
      } else {
        return callback(new Error("必须在3~60个字符之间"));
      }
    },
    addActive() {
      if (parseInt(this.active) === 1) {
        this.active = parseInt(this.active) + 2;
      } else {
        this.active = parseInt(this.active) + 1;
      }
      this.$router.push({ query: { value: this.promotionId ,auth:this.active} })
      if (this.active > 5) {
        this.$router.push({
          path: "/pages/promotionManagement/presellPromotion"
        });
      }
    },
    // 公共的
    prev() {
      if (parseInt(this.active) === 3) {
        this.active = parseInt(this.active) - 2;
      } else {
        this.active = parseInt(this.active) - 1;
      }
      this.$router.push({ query: { value: this.promotionId ,auth:this.active} })
      this.nextOrBack();
    },
    next() {
      let _this = this;
      // 从第一页跳转到第二页
      if (this.active == 1) {
        _this.filters.promName = _this.filters.promName.trim();
        _this.filters.startTime = _this.filters.promotionStartEndTime[0];
        _this.filters.endTime = _this.filters.promotionStartEndTime[1];
        // _this.filters.frontMoneyPayTimeStart = _this.filters.frontMoneyPayStartEndTime[0];
        // _this.filters.frontMoneyPayTimeEnd = _this.filters.frontMoneyPayStartEndTime[1];
        // _this.filters.tailMoneyPayTimeStart = _this.filters.tailMoneyPayStartEndTime[0];
        // _this.filters.tailMoneyPayTimeEnd = _this.filters.tailMoneyPayStartEndTime[1];

        // if(new Date(_this.filters.startTime) > new Date(_this.filters.frontMoneyPayTimeStart)){
        //     this.$message({ message: "活动开始时间应小于等于订金支付时间", type: "warning"});
        //     return false;
        // }
        // if(_this.filters.frontPromType == 17){
        //   if(new Date(_this.filters.frontMoneyPayTimeStart) > new Date(_this.filters.tailMoneyPayTimeStart)){
        //       this.$message({ message: "订金支付时间应小于等于尾款支付时间 ", type: "warning"});
        //       return false;
        //   }
        //   if(new Date(_this.filters.tailMoneyPayTimeStart) > new Date(_this.filters.endTime)||new Date(_this.filters.tailMoneyPayTimeEnd) > new Date(_this.filters.endTime)){
        //       this.$message({ message: "尾款支付时间应小于等于活动结束时间 ", type: "warning"});
        //       return false;
        //   }
        //   if(new Date(_this.filters.tailMoneyPayTimeStart) > new Date(_this.filters.sendGoodsTime)||new Date(_this.filters.tailMoneyPayTimeEnd) > new Date(_this.filters.sendGoodsTime)){
        //       this.$message({ message: "尾款支付时间应小于等于发货时间", type: "warning"});
        //       return false;
        //   }
        // }
        this.filters.proUserType = this.selectUserType.join(",");
        //保存会员等级 会员类型
        this.filters.memTypes = this.selectMemTypes.join(",");
        this.filters.channelId = this.channelId.join(",");
        this.filters.promotionMemberGradeList = [];

        this.memberGradeList.forEach(item=>{
          this.filters.promotionMemberGradeList.push({platformId:item.businessId,levelCodeList:item.levelSelectList})
        })
        _this.$refs["filters"].validate(valid => {
          if (valid) {
            if (_this.filters.id == null || _this.filters.id == "") {
              this.utils.request.promotionCreate(_this.filters, function(res) {
                if (res.code == "0000") {
                  _this.filters.id = res.data;
                  _this.promotionId = res.data;
                  _this.promotion.promotionId = res.data;
                  _this.$refs.stepThreeVue.init(
                    _this.promotionId,
                    _this.filters.frontPromType,
                    [],
                     _this.filters.costAllocationFlag
                  );
                  _this.addActive();
                }else{
                   _this.$message({ message: res.msg, type: "warning" });
                }
              });
            } else {
              this.utils.request.promotionUpdate(this.filters, function(res) {
                if (res.code == "0000") {
                  _this.$refs.stepThreeVue.init(
                    _this.promotionId,
                    _this.filters.frontPromType,
                    [],
                    _this.filters.costAllocationFlag
                  );
                  _this.addActive();
                } else{
                   _this.$message({ message: res.msg, type: "warning" });
                }
              });
            }
          }
        });
      }else if (this.active == 2) { // 从第二页跳转到第三页
        /*let params = { promotionId: this.filters.id };
        this.utils.request.presellMerchantAndStoreIsNull(params, function(res) {
          if (res.code == "0000" && res.data == false) {
            _this.$refs.stepThreeVue.init(
              _this.promotionId,
              _this.filters.frontPromType,
              _this.$refs.stepTwoVue.storeTableData.map((ele, index) => {
                return ele.storeId;
              })
            );
             _this.addActive();
          } else {
            _this.$message({ message: "商家店铺未添加", type: "fail" });
          }
        });*/
      }else if (this.active == 3) {// 从第三页跳转到第四页
        var goodsList = this.$refs.stepThreeVue.goodsList;
        for(var i=0;i<goodsList.length;i++){
          // if(!this.$refs.stepThreeVue.checkProductLimits(goodsList[i])){
          //   return;
          // }
          if(goodsList[i].children.length>0){
            for(var j=0;j<goodsList[i].children.length;j++){
              if(!this.$refs.stepThreeVue.checkProductLimits(goodsList[i].children[j])){
                return;
              }
            }
          }
        }
        // 当草稿状态的时候点击第四步修改状态
        if (this.filters.status == 9) {
          let params = { id: this.promotionId, status: 1 };
          this.utils.request.promotionUpdateStatus(params, function(res) {
            if (res.code == "0000") {
              _this.filters.status = 1;

            } else {
            }
          });
        }
        if(this.$refs.stepThreeVue.goodsList.length>0){
           _this.addActive();
        }else{
          _this.$message({ message: "商品未添加", type: "fail" });
          return;
        }

      }
    },

    //活动描述切换
    genDescriptionPlaceholder() {
      let placeholder = "";
      if (
        typeof this.filters.frontPromType == "undefined" ||
        this.filters.frontPromType == null
      ) {
        return "";
      }
      if (this.filters.frontPromType == 17) {
        placeholder = "定金x元可抵扣y元";
      } else if (this.filters.frontPromType == 18) {
        placeholder = "一口价x元";
      }
      return placeholder;
    },

    //---------------------------------第四步---------------------------------------
    submitFormAdminNotPass() {
      let this_ = this;
      // if (
      //   null == this.adminDataForm.auditRemark ||
      //   this.adminDataForm.auditRemark == ""
      // ) {
      //   this.$message({ message: "审核不通过必须填原因", type: "fail" });
      //   return;
      // }
      let callback = res => {
        if (res.code == "0000") {
          this_.filters.status = 4;
          this_.dialogVisibleAdmin = false;
        } else {
          this_.$message({ message: res.msg, type: "fail" });
        }
      };
      this.$refs['adminDataForm'].validate(valid => {
        if (valid) {
          this.adminDataForm.id = this.promotionId;
          this.adminDataForm.status = 4;
          this.utils.request.reviewPromotion(this.adminDataForm, callback);
          this.shenhe = 1;
        }
      });
    },
    submitFormAdmin() {
      let this_ = this;
      this.dialogVisibleAdmin = false;

      let callback = res => {
        if (res.code == "0000") {
          this_.filters.status = 11;
        } else {
          this_.$message({ message: res.msg, type: "fail" });
        }
      };
      this.adminDataForm.id = this.promotionId;
      this.adminDataForm.status = 11;
      this.utils.request.reviewPromotion(this.adminDataForm, callback);
    },

    submitShenheHuodong() {
      let this_ = this;
      this.$confirm("确认提交审核？", "提示", {
        type: "warning"
      })
        .then(() => {
          let callback = res => {
            if (res.code == "0000") {
              this_.filters.status = 2;
              this_.shenhe = 0;
            } else {
              this_.$message({ message: res.msg, type: "fail" });
            }
          };
          let param = {};
          param.id = this.promotionId;
          param.status = 2;

          this.utils.request.reviewPromotion(param, callback);
        })
        .catch(() => {});
    },

    shenheHuodong() {
      if (this.$refs['adminDataForm'] != undefined) {
        this.$refs['adminDataForm'].resetFields();
      }
      this.dialogVisibleAdmin = true;
    },


    detailList() {
      this.$router.push({
        path: `/pages/promotionManagement/presellPromotion`
      });
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
    },

    createPage() {
      this.$router.push("/CreatePromotion");
    },

    handleClose() {
    },
    nextOrBack(){
        //根据当前url中active参数判断执行第几步方法
        if (this.active){
          if (parseInt(this.active) == 2){
            this.$refs.stepTwoVue.init(
                this.promotionId,
                this.active
            );
          }else if(parseInt(this.active) == 3){
            this.$refs.stepThreeVue.init(
              this.promotionId,
              this.filters.frontPromType
            );
          }
        }
    }
  },
  created(){
    //活动id
    //0-创建-1-编辑；
    this.auth = this.$route.query.auth;
    this.filters.id = this.$route.query.value;
    this.active = this.$route.query.auth;
    this.promotionId = this.$route.query.value;
  },
  mounted() {
    if (typeof this.$route.query.value != "undefined") {
      //获取促销基本信息详情
      this.getPromotionDetail(this.promotionId);
    }
    //根据当前url中active参数判断执行第几步方法
    this.nextOrBack();

  }
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
/deep/ .is-bordered{
  padding: 12px 20px 12px 10px;
}
/deep/ .el-button{
  line-height: 0px !important;
}
.mleft10 {
  margin-right: 10px;
}
.mr120 {
  margin-right: 120px;
}
.ml60{
  margin-left: 60px;
}
label {
  font-weight: normal;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  // font-weight: bold;
}
.form-group .pdt3px {
  padding-top: 3px;
}
.b-b {
  border-bottom: 1px solid #dddddd;
}
.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}
.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.i-checks {
  padding-left: 0;
  margin-right: 15px;
  cursor: pointer;
  color: #666666;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.panel-body tr {
  padding: 0 15px;
}
.mgt15 {
  margin-top: 15px;
}
.type {
  display: flex;
  align-items: center;
}
.type p {
  text-align: right;
  margin-right: 20px;
  width: 120px;
}
/deep/ button {
  margin-bottom: 10px;
  margin-left: 10px;
}

/deep/ .content {
  padding: 0 10px 0 0;
  font-size: 14px;
  color: #666666;
  background-color: #fff;
}
.title {
  width: 100%;
  font-weight: normal;
  font-size: 18px;
  color: #333333;
  margin-bottom: 60px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c8cbd0;
  /* font-size: 16px; */
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c8cbd0;
  /* font-size: 16px; */
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #c8cbd0;
  /* font-size: 16px; */
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c8cbd0;
  /* font-size: 16px; */
}
/**
           修改element上传组件样式
        */
.el-upload-dragger-update {
  text-align: center;
  margin-left: -10px;
  margin-bottom: 20px;
}
.el-upload-dragger-update /deep/ .el-upload .el-upload-dragger {
  border: 0px;
  /* width: 100px; */
  height: 42px;
}

/*素材弹窗 */

/deep/ .el-main {
  padding: 0;
  padding-left: 20px;
}
.el-aside-Superior /deep/ .el-tabs {
  height: 600px;
}
.material-main {
  width: 99%;
  height: 600px;
  background: #fff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  position: relative;
}
.material-header {
  display: flex;
  justify-content: space-between;
}
.material-title-right {
  margin-top: 20px;
  margin-right: 30px;
}
.material-title-left {
  margin-top: 20px;
  margin-left: 30px;
  font-size: 15px;
  color: #409eff;
}
.material-main-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.material-main-item {
  margin-left: 10px;
  width: 145px;
  height: 210px;
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid #fff;
  cursor: pointer;
}
.material-main-item-img {
  width: 100%;
  height: 180px;
}
.material-main-item-name {
  margin-top: 5px;
  color: #909399;
}
.material-main-item-select {
  border: 1px solid #409eff;
}
.el-upload-list-item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  /* opacity: 0; */
  display: none;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload-list-item-actions-hover {
  display: block;
}
.upload-delete {
  cursor: pointer;
}
.el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 80px;
  padding-right: 10px;
}
.activityTags {
  /deep/ .el-form-item__content {
    /deep/ .el-button {
      margin-left: 20px;
      margin-bottom: 0 !important;
    }
  }
}
//优惠门槛
.discountConditions {
  /deep/ .el-input {
    width: auto;
  }
  /deep/ .el-form-item__label {
    line-height: 32px !important;
    margin-right: 5px;
  }
}

/*第二步新加样式*/
/deep/ .el-tabs__content {
  padding: 0;
}
.row-line-button {
  width: 100%;
}
.chosenProducts {
  margin: 0 !important;
}
.wid {
  /deep/ .el-form-item__label {
    width: 123px;
    text-align: right;
  }
}
.title {
  padding-left: 35px;
}
.m_l125 {
  margin-left: 125px;
  font-size: 12px;
  color: #666666;
}
.m_b13 {
  margin-bottom: 13px !important;
}
.text {
  font-size: 12px;
  font-weight: normal;
}
.times {
    .times-to {
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      color: #999;
      display: inline-block;
    }
    /deep/ .el-input{
      width:200px !important;
      /deep/ .el-input__inner{
        width: 100% !important;
      }
    }
  }
  .mb5{
    margin-bottom: 5px;
  }

  .flexBox{
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  .child-name{
    flex-shrink: 0;
  }
  .checkboxes{
    display: flex;

  }

}
.pdl32{
  padding-left: 32px;
}
.pdl75{
  padding-left: 75px;
}
.pdl57{
  padding-left: 57px;
}
.errorTipsAlignment{
  /deep/ .el-form-item__content{
    .el-form-item__error{
      position: absolute !important;
      top: -3px !important;
      left: 120px !important;
    }
  }
}

.w126{
  width: 126px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.w104{
  width: 104px;
}

.ml40{
  margin-left: 40px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
.labelAlignment{
  /deep/ .el-form-item__label{
    height: 33px !important;
    line-height: 33px !important;
  }
}
.width450{
  width: 450px !important;
  /deep/ .el-input__inner{
    width: 450px !important;
  }
}
.search-input{
  .times{
    .w211{
      width: 211px !important;
      /deep/ .el-input__inner{
        width: 211px !important;
      }
    }
  }
}
.mr36{
  margin-right: 36px !important;
}
.contentPadding{
  /deep/ .el-form-item__content{
    padding-top: 7px;
  }
}


</style>
